// import { h, init } from 'snabbdom'
// import style from 'snabbdom/modules/style'
// import eventListeners from 'snabbdom/modules/eventlisteners'
// // import vnode from 'snabbdom/vnode'
import snabbdomBuddle from "snabbdom/snabbdom.bundle";

let { patch, h } = snabbdomBuddle;
let Data = [{
        id: 1,
        Rank: 3,
        Title: "The BestMovie",
        Desc: "It's a story about a polabeer and a red anpple,a really boring movie,but everybody like it,soas it got a degree above 9",

    },
    {
        id: 2,
        Rank: 4,
        Title: "Tiger Woods's Wife",
        Desc: "Strangy story about a ugly man called Woods,his wife is so beautiful, but he just like drinking,so this movie is about their terrible life,its a movie worth watching for eat some watermelon",

    },
    {
        id: 3,
        Rank: 1,
        Title: "Good boy has a good mood",
        Desc: "Pretty story about a sunny boy ,john, he borned with no eyes,but smile everyday,because he has a angel,a really kind mom",

    },
    {
        id: 4,
        Rank: 2,
        Title: "Monsters With Sinderela",
        Desc: "Tesla,a huge monster,more than 1 thousand meters hign,in it's left ear ,here lived a litle girl ,named sinderela ,the Story happen 2000 years ago, wo known it as we excavate the huge monster and find there is a little girl in its leftear and in there are something looglike be used by the little girl",

    },
    {
        id: 5,
        Rank: 5,
        Title: "Tiger Woods's Wife",
        Desc: "Ugly man called Woods,his wife is so beautiful, but he just like drinking,so this movie is about their terrible life,its a movie worth watching for eat some watermelon",

    }

]

//最大排序id
let last = Data[Data.length - 1] ? Data[Data.length - 1].Rank + 1 : 1
    // let patch = init([style, eventListeners])

let sortPro = {}; //排序的属性容器
let app = document.querySelector('#app')
let oldVnode = app; //存储更新前的vnode
//内容
//app结构
function Structure(Data) {
    return h('div.container', [
        h('div.header', [ //标题
            h('h1', `Top ${Data.length} movies`)
        ]),
        h('div.toolbar', [ //工具
            h('label', 'Sort by:'),
            h('ul', [
                h('li.rank', {
                    on: { click: [SortBy, "Rank"] }
                }, 'Rank'),
                h('li.title', {
                    on: {
                        click: [SortBy, "Title"]
                    }
                }, 'Title'),
                h('li.desc', {
                    on: {
                        click: [SortBy, "Desc"]
                    }
                }, 'Description'),
                h('button.addbtn', {
                    on: {
                        click: AddItem
                    }
                }, 'Add')
            ])
        ]),
        h('ul.contentlist', //表
            Data.map(item => {
                return h('li.item', {
                    key: item.id,
                    hook: {
                        insert: vnode => {
                            item.Height = vnode.elm.offsetHeight;
                        }
                    },
                    style: {
                        opacity: 0,
                        transform: `translateY(0px)`,
                        delayed: {
                            opacity: 1,
                            transform: `translateY(${item.Top}px)`
                        },
                        remove: {
                            opacity: 0
                        }
                    }
                }, [
                    h("div", [
                        h(
                            "p", item.Title
                        ),
                        h(
                            "p", "Rank:" + item.Rank
                        ),
                        h(
                            "span.right", { on: { click: [RemoveItem, item.id] } }, "x"
                        ),

                        h(
                            "p", {
                                attrs: {
                                    title: item.Desc
                                }
                            }, item.Desc.length > 135 ? item.Desc.substring(0, 135) + ".." : item.Desc
                        )
                    ])
                ])
            }))
    ])
}
//渲染dom
function PatchDom(Data) {
    let top = 0;
    Data.reduce((arr, item) => {
        let last = arr[arr.length - 1];
        console.log(last);
        item.Top = last ? last.Top + 120 : top; //计算初始距离容器顶的距离
        return arr.concat(item);
    }, [])
    oldVnode = patch(oldVnode, Structure(Data))
}
//新增 
function AddItem() {
    Data.unshift({
        id: last++,
        Rank: Math.round(Math.random() * 10, 0),
        Title: "Women's sixth sense",
        Height: 120,
        Desc: "As we know,women have a sense called 'sixth sense',it's a mysterious thing in the world, this movie is a story about a girl borned in the poor family,she saved her family with her sixth sense as the danger is unvisible and my could make things terrible"
    });
    PatchDom(Data);
}
//移除
function RemoveItem(id) {
    Data = Data.filter(item => { //过滤
        if (item.id !== id) {
            return item;
        } else {
            return null;
        }

    });
    console.log(Data);
    PatchDom(Data);
}
//比较
function compare(prop, isNum, ascordesc) {
    return function(obj1, obj2) {
        var val1 = obj1[prop];
        var val2 = obj2[prop];
        if (!isNum) {
            val1 = val1.charCodeAt(0);
            val2 = val2.charCodeAt(0);
        }
        if (ascordesc == true) {
            return val2 - val1;
        }
        return val1 - val2;
    }
}
//排序
function SortBy(Prop) {
    let isNum = true,
        sortType = true; //设置默认的排序方式按数据排序和升序
    if (sortPro[Prop]) {
        sortType = sortPro[Prop].isAsc;
        sortPro[Prop].isAsc = !sortPro[Prop].isAsc;
    } else {
        sortPro[Prop] = {
            isAsc: true
        }
    }
    if (Prop !== "Rank") {
        isNum = false;
    }
    let newData = Data.sort(compare(Prop, isNum, sortType));

    PatchDom(newData)
}
oldVnode = patch(app, Structure(Data)) //初始渲染dom
    //重新渲染DOM,给元素
PatchDom(Data)